<script>
import request from "@/utils/request"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import rightArrowIcon from "./assets/right-arrow.png"
import popupPicker from "@/components/popupPicker/index.vue"
import inputPopup from "./components/inputPopup.vue"
import dateUtils from "@/utils/dateUtils"
import { showToast } from "@/utils"
export default {
  name: "aboutCollege",
  computed: {
    showToast() {
      return showToast
    },
  },
  components: { popupPicker, inputPopup },
  data() {
    return {
      inputForm: {
        universityCollege: "",
        studentCollege: "",
        undergraduateMajor: "",
        studentClass: "",
        studentGrade: "",
        username: "",
        studentCode: "",
      },
      rightArrowIcon,
      universityCollegeList: [], //院校列表
      gradeList: [], //年级列表
      studentCollegeList: [], //学院列表
      undergraduateMajorList: [], //专业列表
      //班级列表
      studentClassList: [
        { value: "01班", label: "01班" },
        { value: "02班", label: "02班" },
        { value: "03班", label: "03班" },
        { value: "04班", label: "04班" },
        { value: "05班", label: "05班" },
        { value: "06班", label: "06班" },
        { value: "07班", label: "07班" },
        { value: "08班", label: "08班" },
        { value: "09班", label: "09班" },
        { value: "10班", label: "10班" },
        { value: "11班", label: "11班" },
        { value: "12班", label: "12班" },
        { value: "13班", label: "13班" },
        { value: "14班", label: "14班" },
        { value: "15班", label: "15班" },
      ],
      editing: false, //是否处于编辑模式，处于编辑模式用户离开当前页面时提示用户保存
    }
  },
  created() {
    //当前展开学校和之前填写的学校不一致时不作数据回显
    if (this.userInfo.personalInfo && this.userInfo.personalInfo.universityCollege === this.universityCollege) {
      this.inputForm = this.userInfo.personalInfo
    }
    //生成近20年的年级列表
    const yearList = dateUtils.getPrevious20Years()
    for (let item of yearList) {
      this.gradeList.push({
        value: item,
        label: item + "级",
      })
    }
    //获取选项列表
    this.inputForm.universityCollege = this.universityCollege
    if (this.inputForm.universityCollege) {
      this.getStudentCollegeList()
    }
    if (this.inputForm.studentCollege) {
      this.getUndergraduateMajorList()
    }
  },
  props: {
    userInfo: Object,
    universityCollege: String,
  },
  watch: {
    editing(val) {
      if (val) {
        //监听页面离开，提示用户保存
        wx.enableAlertBeforeUnload({
          message: "您有未保存的修改，确定要离开吗？",
        })
      } else {
        //取消监听
        wx.disableAlertBeforeUnload()
      }
    },
  },
  //组件被销毁之前触发
  beforeDestroy() {
    //取消监听
    wx.disableAlertBeforeUnload()
  },
  methods: {
    //获取学院列表
    getStudentCollegeList() {
      if (!this.inputForm.universityCollege) return
      request({
        url: "schoolInfo/listCollege",
        data: {
          schoolName: this.inputForm.universityCollege,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.studentCollegeList = data.map((item) => {
          return {
            value: item,
            label: item,
          }
        })
      })
    },
    //获取专业列表
    getUndergraduateMajorList() {
      if (!this.inputForm.studentCollege) return
      request({
        url: "schoolInfo/listMajor",
        data: {
          schoolName: this.inputForm.universityCollege,
          collegeName: this.inputForm.studentCollege,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.undergraduateMajorList = data.map((item) => {
          return {
            value: item,
            label: item,
          }
        })
      })
    },
    //保存数据
    submit() {
      if (!this.inputForm.universityCollege) {
        this.showToast.default("请选择院校")
        return
      }
      if (!this.inputForm.studentCollege) {
        this.showToast.default("请选择学院")
        return
      }
      if (!this.inputForm.undergraduateMajor) {
        this.showToast.default("请选择专业")
        return
      }
      if (!this.inputForm.studentClass) {
        this.showToast.default("请选择班级")
        return
      }
      if (!this.inputForm.studentGrade) {
        this.showToast.default("请选择年级")
        return
      }
      if (!this.inputForm.studentCode) {
        this.showToast.default("请填写学号")
        return
      }
      request({
        url: "userinfo/editPersonalInfo",
        data: this.inputForm,
        showLoading: true,
        errorHandle: true,
      }).then(async () => {
        //刷新用户信息
        await store.dispatch(userActionType.action.refreshUserInfo)
        this.parent.init()
        this.showToast.default("保存成功")
        this.editing = false
      })
    },
  },
  inject: ["parent"],
}
</script>

<template>
  <view class="component">
    <view class="item">
      <view class="label">
        <text>院校</text>
      </view>
      <view class="right">
        <view class="value">{{ inputForm.universityCollege }}</view>
      </view>
    </view>

    <view
      class="item"
      @click="
        () => {
          if (inputForm.universityCollege) {
            $refs.studentCollegePicker.open()
          } else {
            showToast.default('请先填写院校')
          }
        }
      "
    >
      <view class="label">
        <text class="required">*\t</text>
        <text>学院</text>
      </view>
      <view class="right">
        <view class="value" v-if="inputForm.studentCollege">{{ inputForm.studentCollege }}</view>
        <view class="placeholder" v-else>请填写</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popup-picker
      ref="studentCollegePicker"
      title="学院"
      :picker-option-list="studentCollegeList"
      :show-confirm-btn="true"
      :allow-fill="true"
      :allow-search="true"
      v-model="inputForm.studentCollege"
      @change="
        () => {
          inputForm.undergraduateMajor = ''
          getUndergraduateMajorList()
          editing = true
        }
      "
    ></popup-picker>

    <view
      class="item"
      @click="
        () => {
          if (inputForm.studentCollege) {
            $refs.undergraduateMajorPicker.open()
          } else {
            showToast.default('请先填写学院')
          }
        }
      "
    >
      <view class="label">
        <text class="required">*\t</text>
        <text>专业</text>
      </view>
      <view class="right">
        <view class="value" v-if="inputForm.undergraduateMajor">{{ inputForm.undergraduateMajor }}</view>
        <view class="placeholder" v-else>请填写</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popup-picker
      ref="undergraduateMajorPicker"
      title="专业"
      :picker-option-list="undergraduateMajorList"
      :allow-fill="true"
      :allow-search="true"
      :show-confirm-btn="true"
      v-model="inputForm.undergraduateMajor"
      @change="() => (editing = true)"
    ></popup-picker>

    <view class="item" @click="() => $refs.studentClassPicker.open()">
      <view class="label">
        <text class="required">*\t</text>
        <text>班级</text>
      </view>
      <view class="right">
        <view class="value" v-if="inputForm.studentClass">{{ inputForm.studentClass }}</view>
        <view class="placeholder" v-else>请填写</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popup-picker
      ref="studentClassPicker"
      title="班级"
      :picker-option-list="studentClassList"
      v-model="inputForm.studentClass"
      :allow-search="true"
      @change="() => (editing = true)"
    />

    <view class="item" @click="() => $refs.studentGradePicker.open()">
      <view class="label">
        <text class="required">*\t</text>
        <text>年级</text>
      </view>
      <view class="right">
        <view class="value" v-if="inputForm.studentGrade">{{ inputForm.studentGrade }}</view>
        <view class="placeholder" v-else>请填写</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <popup-picker
      :allow-search="true"
      ref="studentGradePicker"
      title="年级"
      :picker-option-list="gradeList"
      v-model="inputForm.studentGrade"
      @change="() => (editing = true)"
    />

    <!--    <view class="item" @click="$refs.usernameInput.open()">-->
    <!--      <view class="label">-->
    <!--        <text class="required">*\t</text>-->
    <!--        <text>姓名</text>-->
    <!--      </view>-->
    <!--      <view class="right">-->
    <!--        <view class="value" v-if="inputForm.username">{{ inputForm.username }}</view>-->
    <!--        <view class="placeholder" v-else>请填写</view>-->
    <!--        <image class="icon" :src="rightArrowIcon"></image>-->
    <!--      </view>-->
    <!--    </view>-->
    <!--    <inputPopup-->
    <!--      ref="usernameInput"-->
    <!--      v-model="inputForm.username"-->
    <!--      title="姓名"-->
    <!--      placeholder="请输入你的姓名"-->
    <!--      @submit="() => (editing = true)"-->
    <!--    />-->

    <view class="item" @click="() => $refs.studentCodeInput.open()">
      <view class="label">
        <text class="required">*\t</text>
        <text>学号</text>
      </view>
      <view class="right">
        <view class="value" v-if="inputForm.studentCode">{{ inputForm.studentCode }}</view>
        <view class="placeholder" v-else>请填写</view>
        <image class="icon" :src="rightArrowIcon"></image>
      </view>
    </view>
    <inputPopup
      ref="studentCodeInput"
      v-model="inputForm.studentCode"
      title="学号"
      placeholder="请输入你的学号"
      @submit="() => (editing = true)"
    />
    <view class="footer-btn">
      <!--			这个位置暂时没按钮，放个盒子占位-->
      <view class="placeholder"></view>
      <view class="save-btn" @click="submit" v-if="editing">保存更改</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  .item {
    height: 104rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #eeeeee;
    .label {
      color: #666666;
      .required {
        color: #ff0000;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .icon {
        width: 27rpx;
        height: 27rpx;
        margin-left: 20rpx;
      }
      .placeholder {
        color: #cccccc;
      }
    }
  }
  .footer-btn {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    .save-btn {
      background: var(--theme-color);
      color: var(--text-color-white);
      font-size: 32rpx;
      padding: 10rpx 40rpx;
      border-radius: 30rpx;
    }
  }
}
</style>
